// 全局配置对象
window.AppConfig = {
    // 是否使用模拟数据（设置为true强制使用模拟数据，即使在Android环境中）
    useMockData:true,

    // 是否显示详细日志
    enableDebugLog: true,

    // 是否启用vConsole调试面板
    enableVConsole: false,

    // 默认刷新间隔 (毫秒)
    defaultRefreshInterval: 10000,

    // 应用版本信息
    version: '2.1.0'
};

// 在页面加载时检查是否需要加载vConsole
document.addEventListener('DOMContentLoaded', function () {
    // 如果启用了VConsole
    if (window.AppConfig && window.AppConfig.enableVConsole) {
        console.log('vConsole已在配置中启用');

        // 确保VConsole初始化脚本执行
        setTimeout(function () {
            // 检查VConsole是否已初始化
            if (!window.vConsole && !window._vConsoleInitialized) {
                console.log('尝试初始化VConsole...');

                // 确定当前页面相对路径
                var basePath = '';
                // 检查是否在子目录中
                if (window.location.pathname.includes('/page/')) {
                    basePath = '../';
                }

                // 加载vconsole-init.js脚本
                var script = document.createElement('script');
                script.src = basePath + 'js/vconsole-init.js';
                document.head.appendChild(script);
            }
        }, 500);
    } else {
        console.log('vConsole在配置中已禁用');
    }
});

// 在VConsole已初始化的情况下，添加一些应用信息到控制台
(function () {
    // 检查VConsole是否已初始化
    if (window.vConsole) {
        console.info('应用配置信息:');
        console.info('- 版本: ' + AppConfig.version);
        console.info('- 模拟数据: ' + (AppConfig.useMockData ? '启用' : '禁用'));
        console.info('- 调试日志: ' + (AppConfig.enableDebugLog ? '启用' : '禁用'));
        console.info('- 刷新间隔: ' + AppConfig.defaultRefreshInterval + 'ms');
    }
})();

/**
 * 判断是否应该使用模拟数据
 * @returns {boolean} 是否应该使用模拟数据
 */
function shouldUseMockData() {
    // 如果全局配置为使用模拟数据，则直接返回true
    if (window.AppConfig && window.AppConfig.useMockData) {
        return true;
    }

    return false;
}

/**
 * 智慧粮仓系统 - 公共JavaScript函数
 * 包含所有页面共享的功能
 */

// 全局配置
const APP_CONFIG = {
    name: '智慧粮仓测控平台',
    version: '2.1.0',
    year: new Date().getFullYear()
};

/**
 * 初始化公共头部
 * @param {string} pageTitle 页面标题
 * @param {boolean} showBackButton 是否显示返回按钮
 * @param {Array} additionalButtons 额外的按钮 [{icon: 'icon-class', text: '按钮文本', id: 'button-id', callback: function}]
 */
function initCommonHeader(pageTitle, showBackButton = true, additionalButtons = []) {
    const headerContainer = document.querySelector('.common-header');
    if (!headerContainer) return;

    // 清空现有内容
    headerContainer.innerHTML = '';

    // 添加头部样式，使其与主题色保持一致
    headerContainer.style.cssText = `
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
        color: var(--theme-text-color);
        border-bottom: 1px solid var(--theme-card-border);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: relative;
        height: 64px;
        box-shadow: 0 2px 8px var(--theme-card-shadow);
    `;

    // 创建左侧区域 (只有返回按钮)
    const headerLeft = document.createElement('div');
    headerLeft.className = 'header-left';
    headerLeft.style.cssText = `
        width: 80px;
        display: flex;
        align-items: center;
    `;

    // 添加返回按钮
    if (showBackButton) {
        const backLink = document.createElement('a');
        backLink.href = 'javascript:void(0)';
        backLink.className = 'back-link';
        backLink.id = 'back-button';
        backLink.style.cssText = `
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--theme-card-bg);
            border: 1px solid var(--theme-card-border);
            border-radius: 50%;
            color: var(--theme-text-color);
            text-decoration: none;
            transition: all 0.2s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        `;
        backLink.innerHTML = '<i class="layui-icon layui-icon-left" style="font-size: 18px;"></i>';

        // 添加悬停效果
        backLink.addEventListener('mouseenter', function () {
            this.style.background = 'rgba(255, 255, 255, 0.25)';
            this.style.transform = 'scale(1.05)';
        });
        backLink.addEventListener('mouseleave', function () {
            this.style.background = 'var(--theme-card-bg)';
            this.style.transform = 'scale(1)';
        });

        backLink.addEventListener('click', function (e) {
            e.preventDefault();
            // 如果有Android接口，则调用原生返回
            if (window.android && window.android.goBack) {
                window.android.goBack();
            } else {
                // 否则使用浏览器返回
                history.back();
            }
        });
        headerLeft.appendChild(backLink);
    }

    // 创建中间区域（标题）
    const headerCenter = document.createElement('div');
    headerCenter.className = 'header-center';
    headerCenter.style.cssText = `
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        flex: 1;
    `;

    // 添加标题
    const titleContainer = document.createElement('div');
    titleContainer.className = 'title-container';
    titleContainer.style.cssText = `
        display: flex;
        align-items: center;
        justify-content: center;
    `;
    titleContainer.innerHTML = `
        <span class="page-title" style="
            font-size: 18px; 
            font-weight: 600;
            color: var(--theme-text-color);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        ">${pageTitle}</span>
    `;
    headerCenter.appendChild(titleContainer);

    // 创建右侧区域（日期时间）
    const headerRight = document.createElement('div');
    headerRight.className = 'header-right';
    headerRight.style.cssText = `
        width: 200px;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    `;

    // 时间显示在一行
    const dateTimeContainer = document.createElement('div');
    dateTimeContainer.className = 'date-time-container';
    dateTimeContainer.style.cssText = `
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: var(--theme-card-bg);
        border: 1px solid var(--theme-card-border);
        border-radius: 20px;
        padding: 6px 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    `;

    const now = new Date();
    dateTimeContainer.innerHTML = `
        <span class="datetime" style="
            font-size: 14px;
            color: var(--theme-text-color);
            font-weight: 500;
        ">${formatDateTime(now)}</span>
    `;
    headerRight.appendChild(dateTimeContainer);

    // 组装头部
    headerContainer.appendChild(headerLeft);
    headerContainer.appendChild(headerCenter);
    headerContainer.appendChild(headerRight);

    // 启动时间更新
    setInterval(function () {
        const now = new Date();
        const dateTimeElement = document.querySelector('.datetime');

        if (dateTimeElement) {
            dateTimeElement.textContent = formatDateTime(now);
        }
    }, 1000);
}

/**
 * 格式化日期为 YYYY-MM-DD
 * @param {Date} date 日期对象
 * @returns {string} 格式化的日期字符串
 */
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

/**
 * 格式化时间为 HH:MM:SS
 * @param {Date} date 日期对象
 * @returns {string} 格式化的时间字符串
 */
function formatTime(date) {
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
}

/**
 * 格式化日期时间为 YYYY-MM-DD HH:MM:SS
 * @param {Date|string} dateInput 日期对象或日期字符串
 * @returns {string} 格式化的日期时间字符串
 */
function formatDateTime(dateInput) {
    // 如果输入是字符串，尝试转换为Date对象
    const date = dateInput instanceof Date ? dateInput : new Date(dateInput);
    
    // 检查日期是否有效
    if (isNaN(date.getTime())) {
        console.warn('无效的日期输入:', dateInput);
        return dateInput; // 如果无效，返回原始输入
    }
    
    // 格式化日期部分
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    
    // 格式化时间部分
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    
    // 组合成完整格式
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

/**
 * 显示悬浮提示
 * @param {string} message 提示消息
 * @param {string} type 提示类型 'success'|'error'|'warning'|'info'
 * @param {number} duration 显示时长(毫秒)
 */
function showToast(message, type = 'info', duration = 3000) {
    // 创建toast元素
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;

    // 设置toast样式
    toast.style.position = 'fixed';
    toast.style.top = '20px';
    toast.style.left = '50%';
    toast.style.transform = 'translateX(-50%)';
    toast.style.padding = '12px 20px';
    toast.style.borderRadius = '6px';
    toast.style.color = '#fff';
    toast.style.fontWeight = '500';
    toast.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    toast.style.zIndex = '10000';
    toast.style.opacity = '0';
    toast.style.transition = 'all 0.3s ease';

    // 根据类型设置背景色
    switch (type) {
        case 'success':
            toast.style.backgroundColor = 'rgba(76, 175, 80, 0.9)';
            break;
        case 'error':
            toast.style.backgroundColor = 'rgba(244, 67, 54, 0.9)';
            break;
        case 'warning':
            toast.style.backgroundColor = 'rgba(255, 152, 0, 0.9)';
            break;
        default:
            toast.style.backgroundColor = 'rgba(33, 150, 243, 0.9)';
    }

    // 添加到页面
    document.body.appendChild(toast);

    // 显示toast
    setTimeout(() => {
        toast.style.opacity = '1';
        toast.style.transform = 'translateX(-50%) translateY(10px)';
    }, 10);

    // 设置自动消失
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(-50%) translateY(-10px)';

        // 移除元素
        setTimeout(() => {
            if (toast.parentNode) {
                document.body.removeChild(toast);
            }
        }, 300);
    }, duration);
}


/**
 * 统一加载主题设置
 * 所有页面都应该调用此函数来加载保存的主题
 */
function loadSavedTheme() {
    try {
        // 从本地存储获取主题（先检查新的键名，再检查旧的键名）
        let savedTheme = localStorage.getItem('preferredTheme');
        if (!savedTheme) {
            savedTheme = localStorage.getItem('theme');
        }

        // 如果有主题设置且不是默认主题，则应用该主题
        if (savedTheme && savedTheme !== 'default') {
            document.body.classList.add('theme-' + savedTheme);
            document.documentElement.setAttribute('data-theme', savedTheme);
        } else {
            document.documentElement.setAttribute('data-theme', 'default');
        }

        // 设置监听器以接收来自其他页面的主题变更
        if (typeof BroadcastChannel !== 'undefined') {
            const themeChannel = new BroadcastChannel('theme_change');
            themeChannel.onmessage = function (event) {
                if (event.data && event.data.theme) {
                    applyThemeChange(event.data.theme);
                }
            };
        }

        console.log('主题已加载:', savedTheme || 'default');
    } catch (e) {
        console.error('加载主题失败:', e);
    }
}

/**
 * 实时应用主题变更
 * @param {string} theme 主题名称
 */
function applyThemeChange(theme) {
    // 移除所有主题类
    document.body.classList.remove(
        'theme-default',
        'theme-green',
        'theme-purple',
        'theme-orange',
        'theme-dark'
    );

    // 添加新主题类
    if (theme && theme !== 'default') {
        document.body.classList.add(`theme-${theme}`);
    }

    // 更新document的主题数据属性
    document.documentElement.setAttribute('data-theme', theme || 'default');

    // 更新所有打开的模态框的主题
    const modals = document.querySelectorAll('.modal');
    if (modals.length > 0) {
        modals.forEach(modal => {
            // 移除所有主题类
            modal.classList.remove(
                'theme-default',
                'theme-green',
                'theme-purple',
                'theme-orange',
                'theme-dark'
            );

            // 添加新主题类
            if (theme && theme !== 'default') {
                modal.classList.add(`theme-${theme}`);
            } else {
                modal.classList.add('theme-default');
            }
        });
    }

    console.log('主题已更新:', theme || 'default');
}

// 在页面加载完成后自动加载主题
document.addEventListener('DOMContentLoaded', function () {
    loadSavedTheme();
});


// 暴露公共方法
window.APP_CONFIG = APP_CONFIG;
window.loadSavedTheme = loadSavedTheme;
window.initCommonHeader = initCommonHeader;
window.formatDate = formatDate;
window.formatTime = formatTime;
window.formatDateTime = formatDateTime;
window.showToast = showToast;

/**
 * 通用分页组件
 * 可在各个模块中复用的分页控制组件
 */
const PaginationComponent = {
    /**
     * 初始化分页组件
     * @param {Object} options 配置选项
     * @param {string} options.containerId 分页容器ID
     * @param {number} options.currentPage 当前页码
     * @param {number} options.totalCount 总记录数
     * @param {number} options.pageSize 每页记录数
     * @param {Function} options.onPageChange 页码变更回调函数
     * @param {string} [options.containerClass='pagination-container'] 容器CSS类名
     * @param {boolean} [options.showInfo=true] 是否显示分页信息
     * @param {string} [options.theme='default'] 主题样式：'default'或'compact'
     * @returns {Object} 分页组件实例
     */
    create(options) {
        // 默认配置
        const defaultOptions = {
            containerClass: 'pagination-container',
            showInfo: true,
            theme: 'default'
        };
        
        // 合并配置
        const config = {...defaultOptions, ...options};
        
        // 验证必填参数
        if (!config.containerId || !config.onPageChange) {
            console.error('分页组件初始化失败：缺少必要参数');
            return null;
        }
        
        // 创建分页实例
        const pagination = {
            // 配置
            config: config,
            
            // 状态
            state: {
                currentPage: config.currentPage || 1,
                totalCount: config.totalCount || 0,
                pageSize: config.pageSize || 10,
                totalPages: Math.ceil((config.totalCount || 0) / (config.pageSize || 10))
            },
            
            /**
             * 渲染分页组件
             */
            render() {
                const container = document.getElementById(this.config.containerId);
                if (!container) return;
                
                // 计算总页数
                const totalPages = Math.ceil(this.state.totalCount / this.state.pageSize);
                this.state.totalPages = totalPages;
                
                // 创建分页容器
                const paginationContainer = document.createElement('div');
                paginationContainer.className = this.config.containerClass;
                
                // 添加主题样式
                if (this.config.theme === 'compact') {
                    paginationContainer.classList.add('pagination-compact');
                }
                
                // 构建HTML
                let html = '';
                
                // 分页信息
                if (this.config.showInfo) {
                    const startItem = (this.state.currentPage - 1) * this.state.pageSize + 1;
                    const endItem = Math.min(this.state.currentPage * this.state.pageSize, this.state.totalCount);
                    
                    html += `
                        <div class="pagination-info">
                            <span>显示 ${startItem} - ${endItem} 条，共 ${this.state.totalCount} 条记录</span>
                        </div>
                    `;
                }
                
                // 分页控制
                html += `
                    <div class="pagination-controls">
                        <button class="pagination-btn pagination-prev" ${this.state.currentPage <= 1 ? 'disabled' : ''}>
                            <i class="layui-icon layui-icon-left"></i>上一页
                        </button>
                        <span class="pagination-page-info">第 ${this.state.currentPage} 页，共 ${totalPages} 页</span>
                        <button class="pagination-btn pagination-next" ${this.state.currentPage >= totalPages ? 'disabled' : ''}>
                            下一页<i class="layui-icon layui-icon-right"></i>
                        </button>
                    </div>
                `;
                
                // 设置HTML
                paginationContainer.innerHTML = html;
                
                // 清空容器并添加分页组件
                container.innerHTML = '';
                container.appendChild(paginationContainer);
                
                // 绑定事件
                this._bindEvents(container);
            },
            
            /**
             * 绑定事件
             * @param {HTMLElement} container 容器元素
             */
            _bindEvents(container) {
                // 上一页按钮
                const prevBtn = container.querySelector('.pagination-prev');
                if (prevBtn) {
                    prevBtn.addEventListener('click', () => {
                        if (this.state.currentPage > 1) {
                            this.goToPage(this.state.currentPage - 1);
                        }
                    });
                }
                
                // 下一页按钮
                const nextBtn = container.querySelector('.pagination-next');
                if (nextBtn) {
                    nextBtn.addEventListener('click', () => {
                        if (this.state.currentPage < this.state.totalPages) {
                            this.goToPage(this.state.currentPage + 1);
                        }
                    });
                }
            },
            
            /**
             * 跳转到指定页
             * @param {number} page 页码
             */
            goToPage(page) {
                if (page < 1 || page > this.state.totalPages || page === this.state.currentPage) {
                    return;
                }
                
                this.state.currentPage = page;
                this.render();
                
                // 调用回调函数
                if (typeof this.config.onPageChange === 'function') {
                    this.config.onPageChange(page);
                }
            },
            
            /**
             * 更新分页数据
             * @param {Object} data 分页数据
             * @param {number} data.currentPage 当前页码
             * @param {number} data.totalCount 总记录数
             * @param {number} [data.pageSize] 每页记录数
             */
            update(data) {
                if (data.currentPage !== undefined) {
                    this.state.currentPage = data.currentPage;
                }
                
                if (data.totalCount !== undefined) {
                    this.state.totalCount = data.totalCount;
                }
                
                if (data.pageSize !== undefined) {
                    this.state.pageSize = data.pageSize;
                }
                
                this.render();
            }
        };
        
        // 初始渲染
        pagination.render();
        
        return pagination;
    }
};

// 导出为全局变量
window.PaginationComponent = PaginationComponent;

